---
import { config_site } from '../utils/config-adapter';
// @ts-ignore
import * as feather from 'feather-icons';
import Search from './Search.astro';

// TypeScript类型定义
interface NavItem {
  title: string;
  path: string;
  icon?: string;
}

// 获取导航配置
const navItems: NavItem[] = config_site.nav || [];

// 从feather图标库获取图标的辅助函数
function getIconSvg(iconName: string): string {
  if (!iconName) return '';
  try {
    const icon = feather.icons[iconName];
    return icon ? icon.toSvg({
      width: 20,
      height: 20,
      'stroke-width': 2,
      class: 'nav-icon'
    }) : '';
  } catch (error) {
    console.error(`Icon '${iconName}' not found in feather-icons`);
    return '';
  }
}
import '../styles/components/Header.styl';
---

<nav class="nav">  <button id="mobile-menu-toggle" class="mobile-menu-toggle" aria-label="导航菜单" aria-expanded="false">
    <span class="menu-icon-wrapper">
      <Fragment set:html={feather.icons['menu'].toSvg({
        width: 24,
        height: 24,
        class: 'menu-icon menu-open'
      })} />
      <Fragment set:html={feather.icons['x'].toSvg({
        width: 24,
        height: 24,
        class: 'menu-icon menu-close'
      })} />
    </span>
  </button>

  <ul id="nav-menu">
    {navItems.map((item) => (
      <li>
        <a href={item.path} class="nav-link">
          {item.icon && (
            <span class="nav-icon-container" set:html={getIconSvg(item.icon)} />
          )}
          <span>{item.title}</span>
        </a>
      </li>    ))}     
      <li>
        <p class="nav-link search-toggle" id="search-toggle">
          <span class="nav-icon-container" set:html={feather.icons['search'].toSvg({
        width: 20,
        height: 20,
        'stroke-width': 2,
        class: 'nav-icon'
          })} />
          <span>搜索</span>
        </p>
      </li>
  </ul>
</nav>

<!-- 移动端菜单遮罩层 -->
<div id="mobile-menu-backdrop" class="mobile-menu-backdrop"></div>

<div id="search-container" class="search-container">
  <div class="search-backdrop"></div>
  <div class="search-box">
    <div class="search-header">
      <h2>站内搜索</h2>
      <button class="search-close" id="search-close">
        <Fragment set:html={feather.icons['x'].toSvg({
          width: 24,
          height: 24,
          class: 'close-icon'
        })} />
      </button>
    </div>
    <div class="search-content">
      <Search />
    </div>
  </div>
</div>

<script>
// 移动端菜单交互逻辑
document.addEventListener('DOMContentLoaded', () => {
  const menuToggle = document.getElementById('mobile-menu-toggle');
  const navMenu = document.getElementById('nav-menu');
  const searchToggle = document.getElementById('search-toggle');
  const searchContainer = document.getElementById('search-container');
  const searchClose = document.getElementById('search-close');
  const searchBackdrop = document.querySelector('.search-backdrop');  const mobileMenuBackdrop = document.getElementById('mobile-menu-backdrop');
  
  if (menuToggle && navMenu && mobileMenuBackdrop) {
    menuToggle.addEventListener('click', () => {
      if (navMenu.classList.contains('active')) {
        // 关闭菜单
        navMenu.classList.remove('active');
        menuToggle.setAttribute('aria-expanded', 'false');
        mobileMenuBackdrop.classList.remove('active');
      } else {
        // 打开菜单
        navMenu.classList.add('active');
        menuToggle.setAttribute('aria-expanded', 'true');
        mobileMenuBackdrop.classList.add('active');
      }
    });
    
    // 点击菜单项后关闭菜单
    const menuItems = navMenu.querySelectorAll('a, .search-toggle');
    menuItems.forEach(item => {
      item.addEventListener('click', () => {
        if (window.innerWidth <= 768) {
          navMenu.classList.remove('active');
          menuToggle.setAttribute('aria-expanded', 'false');
          mobileMenuBackdrop.classList.remove('active');
        }
      });
    });
      // 点击遮罩层关闭菜单
    if (mobileMenuBackdrop) {
      mobileMenuBackdrop.addEventListener('click', () => {
        navMenu.classList.remove('active');
        menuToggle.setAttribute('aria-expanded', 'false');
        mobileMenuBackdrop.classList.remove('active');
      });
    }
    
    // 点击菜单外部关闭菜单
    document.addEventListener('click', (e) => {
      if (window.innerWidth <= 768 && 
          !navMenu.contains(e.target as Node) && 
          !menuToggle.contains(e.target as Node) &&
          !mobileMenuBackdrop.contains(e.target as Node) &&
          navMenu.classList.contains('active')) {
        navMenu.classList.remove('active');
        menuToggle.setAttribute('aria-expanded', 'false');
        mobileMenuBackdrop.classList.remove('active');
      }
    });
    
    // ESC键关闭菜单
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && navMenu.classList.contains('active')) {
        navMenu.classList.remove('active');
        menuToggle.setAttribute('aria-expanded', 'false');
        mobileMenuBackdrop.classList.remove('active');
      }
    });
  }
  
  // 搜索框交互逻辑
  if (searchToggle && searchContainer && searchClose) {
    // 点击搜索按钮显示搜索框
    searchToggle.addEventListener('click', () => {
      searchContainer.classList.add('active');
      document.body.style.overflow = 'hidden'; // 防止背景滚动
      // 聚焦到搜索输入框
      setTimeout(() => {
        const searchInput = document.querySelector('.pagefind-ui__search-input');
        if (searchInput) {
          (searchInput as HTMLElement).focus();
        }
      }, 100);
    });
    
    // 点击关闭按钮隐藏搜索框
    searchClose.addEventListener('click', () => {
      searchContainer.classList.remove('active');
      document.body.style.overflow = ''; // 恢复背景滚动
    });
    
    // 点击遮罩层关闭搜索框
    if (searchBackdrop) {
      searchBackdrop.addEventListener('click', () => {
        searchContainer.classList.remove('active');
        document.body.style.overflow = '';
      });
    }
    
    // ESC键关闭搜索框
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && searchContainer.classList.contains('active')) {
        searchContainer.classList.remove('active');
        document.body.style.overflow = '';
      }
    });
  }
});
</script>